<template>
  <div class="w-full h-[400px] max-h-[50vh]" ref="chart" id="chart"></div>
  <!-- <CustomChart :option="getOption()" /> -->
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ElMessage } from "element-plus";
import { onMounted, onUnmounted, ref } from "vue";
import request from "../../request";
import CustomChart from "./components/CustomChart.vue";
const chartData = ref<any[]>([]);
let object: any = null;
onMounted(() => {
  getData();
  window.addEventListener("resize", resizeChart);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeChart);
});
const resizeChart = () => {
  object.resize();
};
// 从后端获取数据
const getData = async () => {
  let param = {
    fuck: "qilin",
  };
  let result = await request.post("/pbLoginRecord/chart", param);
  const json = result.data;
  console.log("here: ", json);

  if (json) {
    ElMessage.success("成功从后端获取数据");
    chartData.value = json;
    setChart();
  } else {
    ElMessage.error("没有从后端获取到数据");
  }
};
// 更新表格状态
const setChart = () => {
  // let dom:any = chartRef.value;
  let dom: any = document.getElementById("chart");
  object = echarts.init(dom);
  const rowData = chartData.value.map((item) => {
    return item.username;
  });
  const columnData = chartData.value.map((item) => {
    return item.count;
  });
  const option = {
    title: {
      text: "用户活跃度",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        animation: false,
        label: {
          backgroundColor: "#505765",
        },
      },
    },
    xAxis: {
      type: "category",
      data: rowData,
      axisLabel: {
        show: true,
        interval: 0,
      },
    },
    yAxis: {
      type: "value",
      name: "登录次数",
    },
    dataZoom: [
      {
        show: true,
        start: 0,
        end: 100,
      },
      {
        type: "inside",
        start: 0,
        end: 100,
      },
    ],
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "登录次数",
        data: columnData,
        type: "bar",
        showBackground: true,
        barMaxWidth: "40px",
        label: {
          show: true,
          position: "top",
        },
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  };
  object.setOption(option);
  object.resize();
};
// 获取表格option
const getOption = () => {
  const rowData = chartData.value.map((item) => {
    return item.username;
  });
  const columnData = chartData.value.map((item) => {
    return item.count;
  });
  const option = {
    title: {
      text: "登录次数排行",
    },
    xAxis: {
      type: "category",
      data: rowData,
    },
    yAxis: {
      name: "登录次数",
      type: "value",
    },
    series: [
      {
        data: columnData,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 100,
      },
      {
        start: 0,
        end: 100,
      },
    ],
  };
  return option;
};
</script>
